import Taro, {Component, Config} from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.scss'
import { ORDER_TYPE_NAME } from "@/config/types"
import { toGoodsPage } from "@/utils/page_router"
import { getOrderInfo, refundOrder } from "@/api/orderApi"
import { formatTime, getSubscribeMessage } from "@/utils/utils"
import { IntegralCartGoods } from "@/market/components/index"
import { IconGold, Loading, OrderRefundModal } from "@/components/index"

export default class Index extends Component {
  state: any
  config: Config = {
    navigationBarTitleText: '订单详情'
  }

  constructor() {
    super(...arguments)
    const { params } = this.$router
    this.state = {
      id: params.id,
      loading: true,
      cartList: [],
      userInfo: {},
      orderInfo: {},
      isOpened: false
    }
  }

  componentDidShow() {
    this.getOrderInfo()
  }

  /**
   * 获取订单信息
   * @param id 订单id
   */
  getOrderInfo() {
    const { id } = this.state
    getOrderInfo(id).then(res => {
      const {data} = res
      this.setState({
        cartList: data.cartSnap,
        userInfo: data.addressSnap,
        orderInfo: data,
        storeInfo: data.cooperateShopAddressSnap,
        loadingStatus: false
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  //  显示选择弹出窗口
  showSelectPopup(name, bool) {
    this.setState({
      [name]: bool
    })
  }

  //  确认退单
  onConfirmRefund(content) {
    const { id, orderInfo } = this.state
    //  订阅通知模板
    wx.requestSubscribeMessage({
      tmplIds: getSubscribeMessage('orderRefund'),
      complete: () => {
        wx.showLoading({ title: '请稍后', mask: true })
        refundOrder({ id, content }).then(() => {
          this.setState({
            isOpened: false,
            orderInfo: { ...orderInfo, refundAble: 0 }
          }, () => {
            wx.hideLoading()
            wx.showToast({ title: '提交成功' })
          })
        })
      }
    })
  }

  render() {
    const { loading, cartList, userInfo, storeInfo, orderInfo, isOpened } = this.state
    return (<View className='detail-page'>
      {loading && <Loading isCover/>}
      <View className='order-card detail-header d-f f-d-c p-0'>
        {orderInfo.distribute === 1 && <View className='order-card__body user-info d-f f-d-c f-w-w'>
          <View className='user-box d-f a-i-c j-c-b'>
            <View className='user-name t-o-e'>{storeInfo.shopName}</View>
            <View className='user-phone t-o-e'>{storeInfo.phone}</View>
          </View>
          <View className='user-box user-address'>{storeInfo.address}</View>
        </View>}
        {orderInfo.distribute === 0 && <View className='order-card__body user-info d-f f-d-c f-w-w'>
          <View className='user-box d-f a-i-c j-c-b'>
            <View className='user-name t-o-e'>{userInfo.name}</View>
            <View className='user-phone t-o-e'>{userInfo.telephone}</View>
          </View>
          <View className='user-box user-address'>{userInfo.city} {userInfo.detail}</View>
        </View>}
      </View>

      <View className='order-card order-card__body'>
        <View className='cart-list'>
          {cartList.map((item) => {
            return (<IntegralCartGoods key={item.id} info={item} className='goods-info' onClick={() => toGoodsPage(item)}/>)
          })}
        </View>
        {/*{!!orderInfo.refundAble && <View className='refund-box d-f a-i-c j-c-e'>*/}
        {/*  <View className='refund-btn thin-border f-g-5' hoverClass='hover-class--btn' onClick={this.showSelectPopup.bind(this, 'isOpened', true)}>退单</View>*/}
        {/*</View>}*/}
        <View className='detail-list'>
          <View className='detail-item'>
            <View className='item-left'>共{cartList.length}件商品</View>
            <View className='item-right pay-amount bnn-number'>{Number(orderInfo.payAmount)} <IconGold/></View>
          </View>
          <View className='detail-item'>
            <View className='item-left'>订单备注：</View>
            <View className='item-right'>{orderInfo.remark || '无'}</View>
          </View>
        </View>
      </View>

      <View className='order-card'>
        <View className='order-card__head'>订单信息</View>
        <View className='order-card__body'>
          <View className='detail-list'>
            <View className='detail-item'>
              <View className='item-left'>订单状态：</View>
              <View className='item-right order-status'>{ORDER_TYPE_NAME[orderInfo.status]}</View>
            </View>
            <View className='detail-item'>
              <View className='item-left'>订单编号：</View>
              <View className='item-right'>{orderInfo.id}</View>
            </View>
            <View className='detail-item'>
              <View className='item-left'>订单时间：</View>
              <View className='item-right'>{formatTime(orderInfo.createdAt)}</View>
            </View>
          </View>
        </View>
      </View>
      <OrderRefundModal
        isOpened={isOpened}
        onClose={this.showSelectPopup.bind(this, 'isOpened', false)}
        onConfirm={this.onConfirmRefund.bind(this)}
      />
    </View>)
  }
}
